<template>
    <div class="template">
        <div class="temMain">
            <div class="tip1">
                <div>Nice To Meet You</div>
                <div class="topInfo">
                    <van-badge :content="badgeNum" color="#2EAC7F" :show-zero="false">
                        <img :src="home_collect_button" style="width: 38px;height: 38px;" @click="router.push('/myRecipes')"/>
                    </van-badge>
                    <div style="width: 95px;height: 38px;margin-left: 10px;position: relative;" @click="router.push('/store')">
                        <img :src="home_store_button" style="width: 100%;height: 38px;"/>
                        <!-- <div class="coinsNum">{{ coinsNum > 99 ? '99+' : coinsNum }}</div> -->
                        <div class="coinsNum">Store</div>
                    </div>
                </div>
            </div>
            <img :src="tip1" style="width: 263px;height: 8vh; margin-top: 10px;"/>
            <img :src="home_banner_img" style="width: 100%;height: 18vh;" />
            <img :src="Category" style="margin-top: 20px;width: 135px;" />
            <div class="typeList">
                <img :src="item" v-for="(item, index) in imgList" :key="index" @click="router.push('/recipesItem?type=0&id='+index)"/>
            </div>
        </div>
    </div>
    <MeanBar></MeanBar>
</template>
<script setup>
import MeanBar from '../component/MeanBar.vue'
import home_collect_button from '../assets/home_collect_button.png'
import home_store_button from '../assets/home_store_button.png'
import tip1 from '../assets/tip1.png'
import home_banner_img from '../assets/home_banner_img.png'
import Category from '../assets/Category.png'
import home_category_breakfast from '../assets/home_category_breakfast.png'
import home_category_brunch from '../assets/home_category_brunch.png'
import home_category_lunch from '../assets/home_category_lunch.png'
import home_category_snack from '../assets/home_category_snack.png'
import home_category_dinner from '../assets/home_category_dinner.png'
import home_category_dessert from '../assets/home_category_dessert.png'
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue'
const router = useRouter()
let imgList = [home_category_breakfast, home_category_brunch, home_category_lunch, home_category_snack, home_category_dinner, home_category_dessert]
const badgeNum = ref(0)
onMounted(() => {
    
    if (!localStorage.getItem('recipeXT')) {
        let data= [{collect: 0, rate:0}, {collect: 0, rate:0}, {collect: 0, rate:0}, {collect: 0, rate:0}, {collect: 0, rate:0}, {collect: 0, rate:0}]
        localStorage.setItem('recipeXT', JSON.stringify(data))
    }
    if (!localStorage.getItem("weekType")) {
        localStorage.setItem('weekType', JSON.stringify([1,1,1,1,1,1,1]))
    }
    getNum()
    getCoinsNum()
})
const getNum = () => {
    let recipeList = localStorage.getItem('recipeList') ? JSON.parse(localStorage.getItem('recipeList')) : []
    let num1 = recipeList.length
    let recipeXT =  JSON.parse(localStorage.getItem('recipeXT'))
    let num2 = recipeXT.filter(item => item.collect == 1).length
    badgeNum.value = num1 + num2
}

const coinsNum = ref(0)
const getCoinsNum = () => {
    if(!localStorage.getItem('CPFirst')) {
        localStorage.setItem('CPCoinsNum', 20)
        localStorage.setItem('CPFirst', 1)
	}
    coinsNum.value = localStorage.getItem('CPCoinsNum') ? Number(localStorage.getItem('CPCoinsNum')) : 0

}
</script>
<style scoped>
.topInfo {
    display: flex;
}
.coinsNum {
    position: absolute;
    top: 50%;
    /* left: 46px; */
    right: 8px;
    /* right: 5px; */
    transform: translateY(-50%);
    color: #fff;
    font-size: 13px;
}
.tip1 {
    margin-top: 40px;
    width: 100%;
    font-weight: 500;
    font-size: 14px;
    color: #737373;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.typeList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 10px;
}
.typeList>img {
    width: 107px;
    height: 112px;
    margin-bottom: 10px;
}
</style>